<script setup lang="ts">
import { DataGridColumn, RowNumberOptions } from '@farris/ui-vue';
import { data } from './demo-data';
import { ref } from 'vue';

const columns: DataGridColumn[] = [
    { field: 'id', title: '标识', width: 60, resizable: true, dataType: 'string', readonly: true },
    { field: 'avatar', title: '头像', width: 100, resizable: true, dataType: 'string', readonly: true },
    { field: 'code', title: '编号', width: 80, resizable: true, dataType: 'string' },
    { field: 'name', title: '名称', width: 80, resizable: true, dataType: 'string' },
    { field: 'fullName', title: '全称', width: 80, resizable: true, dataType: 'string' },
    { field: 'status', title: '状况', width: 80, resizable: true, dataType: 'string' },
    { field: 'description', title: '说明', width: 80, resizable: true, dataType: 'text' },
    { field: 'booleanField1', title: '布尔字段一', width: 100, resizable: true, dataType: 'boolean' },
    { field: 'booleanField2', title: '布尔字段二', width: 100, resizable: true, dataType: 'boolean' },
    { field: 'dateField1', title: '日期字段一', width: 100, resizable: true, dataType: 'datetime' },
    { field: 'dateField2', title: '日期字段二', width: 100, resizable: true, dataType: 'datetime' },
    { field: 'datetimeField1', title: '时间字段一', width: 180, resizable: true, dataType: 'datetime' },
    { field: 'datetimeField2', title: '时间字段二', width: 160, resizable: true, dataType: 'datetime' },
    { field: 'enumField1', title: '枚举字段一', width: 120, resizable: true, dataType: 'string' },
    { field: 'enumField2', title: '枚举字段二', width: 100, resizable: true, dataType: 'number' },
    { field: 'numericField1', title: '数字字段一', width: 100, resizable: true, dataType: 'number' },
    { field: 'numericField2', title: '数字字段二', width: 100, resizable: true, dataType: 'number' },
    { field: 'customField1', title: '自定义字段一', width: 120, resizable: true, dataType: 'string' },
    { field: 'customField2', title: '自定义字段二', width: 120, resizable: true, dataType: 'string' },
    { field: 'customField3', title: '自定义字段三', width: 100, resizable: true, dataType: 'string' }
];

const pagination = {
    enable: true,
    size: 20
};

const rowNumberOption: RowNumberOptions = {
    enable: true,
    width: 32,
    heading: '序号'
};

const selectionOption = {
    multiSelect: true,
    showCheckbox: true
};

const rowOption = {
    wrapContent: false
};

const viewSchema = {
    id: 'root-view',
    code: 'root',
    name: '根组件',
    content: [
        {
            id: 'root-view-section',
            type: 'section',
            title: 'This is section title',
            content: [
                {
                    id: 'filter-button-edit',
                    type: 'button-edit'
                },
                {
                    id: 'display-grid',
                    type: 'data-grid'
                }
            ]
        },
        {
            id: 'accordion',
            type: 'accordion'
        }
    ]
};

const schemaContent = ref(`
{
    "id": "root-view",
    "code": "root",
    "name": "根组件",
    "content": [
        {
            "id": "root-view-section",
            "type": "section",
            "title": "This is section title",
            "content": [
                {
                    "id": "filter-button-edit",
                    "type": "button-edit"
                },
                {
                    "id": "display-grid",
                    "type": "data-grid"
                },
                {
                    "id":"accordion",
                    "type":"accordion",
                    "content":[
                        {
                            "id":"accordion-item-1",
                            "type":"accordion-item",
                            "title":"accordion-item-1"
                        },
                        {
                            "id":"accordion-item-2",
                            "type":"accordion-item",
                            "title":"accordion-item-2"
                        }
                    ]
                }
            ]
        }
    ]
}
`);
const schema = ref<any>({});
function loadSchema() {
    const schemaObject = JSON.parse(schemaContent.value);
    schema.value = schemaObject.content[0];
}

function clearSchema() {
    schema.value = {};
}
</script>

<template>
    <div>
        <a href="https://vitejs.dev" target="_blank">
            <img src="/vite.svg" class="logo" alt="Vite logo" />
        </a>
        <a href="https://vuejs.org/" target="_blank">
            <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
        </a>
    </div>
    <div style="display: flex; width: 100%">
        <div style="width: 480px; display: flex; flex-direction: column; margin: 0 10px">
            <textarea v-model="schemaContent" style="width: 100%; border: 1px solid #d8dce6; flex: 1"></textarea>
            <div>
                <f-button style="margin: 10px 5px 0 5px" @click="loadSchema()">Load</f-button>
                <f-button style="margin: 10px 5px 0 5px" @click="clearSchema()">Clear</f-button>
            </div>
        </div>
        <div style="width: 1280px; height: 768px">
            <f-dynamic-view v-model="schema"></f-dynamic-view>
        </div>
    </div>
    <!-- <f-section main-title="This is section title">
        <f-button-edit></f-button-edit>
        <f-data-grid
            :columns="columns"
            :data="data"
            :editable="true"
            :merge-cell="false"
            :pagination="pagination"
            :row-number="rowNumberOption"
            :row-option="rowOption"
            :selection="selectionOption"
        ></f-data-grid>
    </f-section> -->
</template>

<style scoped>
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}
.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
